<template>

  <div class="goodscar">
      <!-- 购物车商品 -->
    <div class="cars">
      <van-card v-for="item in goodsCarList" :key="item.id" :num="item.count" :price="item.sell_price" :desc="item.title"
        :thumb="item.thumb_path">
        <template #tags>
            <carNumbox :number="getobj[item.id]" :id="item.id"></carNumbox>
        </template>
<template #footer>
        <div class="car-checkbox" :aria-checked="getSwithObj[item.id]">
          <van-checkbox v-model="getSwithObj[item.id]"
            @click="changeCheckbox(item.id,getSwithObj[item.id])"
          icon-size="18px"  ></van-checkbox>

        </div>
          <van-button type="danger" size="small" @click="del(item.id)"> 删除</van-button>
        </template>
</van-card>
</div>

<!-- 收货地址 -->
<van-submit-bar :price="getPrice" button-text="提交订单">
    <van-checkbox v-model="checked" @change="checkAll(checked)">全选</van-checkbox>
    <template #tip>
        你的收货地址不支持同城送, <span>修改地址</span>
      </template>
</van-submit-bar>
</div>
</template>
<script>
    import {
        mapGetters,
        mapMutations
    } from 'vuex'
    import carNumbox from '../tool/goodsCarNum.vue'
    export default {

        data() {
            return {
                value: 1,
                checked: false,
                goodsCarList: [] //购车商品数据数组
            }
        },
        created() {
            this.getgoodsCars()
        },
        methods: {

            ...mapMutations(['delCar', 'updateShopCar', 'updateCheckBoxCar']),
            // 删除购物车单个商品
            del(id) {
                this.goodsCarList.forEach((item, i) => {
                    if (item.id == id) {
                        this.goodsCarList.splice(i, 1)
                        this.delCar(id)
                    }
                })
            },

            //发送get 请求获取购物车数据
            async getgoodsCars() {
                const {
                    data
                } = await this.$http.get('api/goods/getshopcarlist/' + this.getIds)
                if (data.status === 0) {
                    data.message.forEach(item => {
                        item.sell_price = item.sell_price + ".00"

                    })
                    this.goodsCarList = data.message
                }

                console.log(this.goodsCarList);

            },
            //购物车复选框点击
            changeCheckbox(id, status, price) {
                this.updateShopCar({
                    id: id,
                    status: status,
                    price: price
                })
            },
            //全选按钮
            checkAll(checked) {
                this.updateCheckBoxCar(this.checked)
            }
        },
        //将vuex 中getters 中的计算属性展开
        computed: {
            ...mapGetters(['getIds', 'getobj', 'getSwithObj', 'getPrice', 'getCount'])
        },
        components: {
            carNumbox
        }
    }
</script>
<style lang="scss" scoped>
    .goodscar {
        .van-card {
            .car-checkbox {
                width: 40px;
            }
            .van-card__footer {
                display: flex;
                justify-content: space-between;
                padding-top: 15px;
            }
            .van-card__desc {
                padding-left: 10px;
                font-size: 14px;
            }
            .van-card__bottom {
                position: absolute;
                top: 64%;
                left: 5%;
            }
        }
        .van-submit-bar {
            position: relative;
            z-index: 1;
        }
    }
</style>